/**app.wxss**/
@import 'style/iconfont.wxss';
@import 'style/common.scss';

page {
  --large-font: 34rpx;
  --medium-font: 32rpx;
  --small-font: 28rpx;
  --mini-font: 24rpx;
  --main-color: #303133;
  --base-color: #606266;
  --secondary-color: #909399;
  --normal-color: #000;
  --desc-color: #C0C4CC;
  --bg-color: #3D7EFF;

  --color-success: #31E749;
  --color-success-light: #D6FADB;
  --color-success-dark: #28B93D;
  --color-success-disabled: #98F3A4;

  --color-error: #E83A30;
  --color-error-light: #FAD8D6;
  --color-error-dark: #BA2E26;
  --color-error-disabled: #F39C97;

  --color-warning: #FF7043;
  --color-warning-light: #FFE2D9;
  --color-warning-dark: #CC5A36;
  --color-warning-disabled: #FFB7A1;

  --color-priamry: #3D7EFF;
  --color-priamry-light: #D8E5FF;
  --color-priamry-dark: #3465CC;
  --color-priamry-disabled: #9EBEFF;

  --color-gray: #AAAAAA;
  --color-gray-light: #F8F7F8;
  --color-gray-dark: #838383;
  --color-gray-disabled: #E6E6E6;

  --main-text: #303133;
  --base-text: #666;
  --secondary-text: #909399;
  --extra-text: #C0C4CC;

  --border-color: #ebebeb;
}

page {
  display: block;
  background-color: #f0f3f8;
  /* font-family: "微软雅黑"; */
  font-size: 28rpx;
  color: var(--main-text);
  height: 100%;
  box-sizing: border-box;
}

page view {
  box-sizing: border-box;
}

page button {
  font-size: 32rpx;
}

.container {
  box-sizing: border-box;
}

.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 200rpx;
  height: 200rpx;
  margin: -100rpx 0 0 -100rpx;
  line-height: 300rpx;
  border-radius: 16rpx;
  background-image: url();
  background-position: center 40rpx;
  background-repeat: no-repeat;
  background-size: 80rpx;
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  text-align: center;
  font-size: 24rpx;
  animation: bounceIn 0.3s;
}

.hover-style {
  background-color: rgba(0, 0, 0, .2) !important;
}

.cus-subsection {
  display: flex;
  align-items: center;
  height: 60rpx;
  background-color: #eeeeef;
  border-radius: 30rpx;
  padding: 8rpx;

  .cus-subsection-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 26rpx;
    color: var(--base-color);
    border-radius: 30rpx;

    &.active {
      background-color: #fff;
      color: #3D7EFF;
    }
  }
}

.cus-legend {
  display: grid;
  align-items: center;
  width: 360rpx;
  height: 100%;
  padding-right: 20rpx;
  overflow-y: auto;

  .cus-legend-inner {
    width: 100%;

    .legend-item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 30px;

      .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 10px;
        border-width: 2px;
        border-style: solid;
      }

      .legend-text {
        font-size: 26rpx;
        color: var(--main-color);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .legend-value {
        font-size: 30rpx;
        font-weight: bold;
        margin-right: 20rpx;
      }

      .legend-rate {
        width: 120rpx;
        color: var(--main-color);
        font-size: 26rpx;
      }
    }
  }
}

.cus-tag {
  font-size: 24rpx;
  font-weight: normal;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;

  &.tag-priamry {
    color: var(--color-priamry);
    background-color: var(--color-priamry-light);
  }

  &.tag-success {
    color: var(--color-success);
    background-color: var(--color-success-light);
  }

  &.tag-error {
    color: var(--color-error);
    background-color: var(--color-error-light);
  }
}

.no-data-wrap {
  width: 100%;
  &.position {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 10000;
  }

  .no-data-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 230px;

    .no-data-pic {
      width: 79px;
      height: 94px;
    }

    .no-data-txt {
      color: var(--desc-color);
      font-size: 30rpx;
      margin-top: 8px;
      text-align: center;
    }
  }
}

ec-canvas {
  width: 100%;
  height: 100%;
}

.wx-radio-input {
  width: 28rpx !important;
  height: 28rpx !important;
  border-radius: 100%;
  margin-left: 20rpx;
  background-color: #fff !important;
}

.wx-radio-input.wx-radio-input-checked {
  width: 28rpx !important;
  height: 28rpx !important;
  background-color: #00bcd4 !important;
}

.placeholder-style {
  color: var(--secondary-text);
  font-size: 28rpx;
  font-weight: 400;
}

.divider-wrap {
  width: 60%;
  margin: 0 auto;
  padding: 30rpx 0;
}

.shadow-box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  border-radius: 8px;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
::-webkit-scrollbar {
  display: none !important; /* 隐藏滚动条 */
  width: 0 !important;
  height: 0 !important;
  color: transparent !important; /* 可选，使滚动条颜色透明 */
}